BottomNavigation 通常會用來搭配 Fragment

BottomNavigation layout

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navigationView"
        android:layout_width="0dp"
        android:layout_height="67dp"
        android:background="@android:color/background_light"
        app:itemIconTint="@drawable/selector"
        app:itemTextColor="#87CEFA"
        app:labelVisibilityMode="labeled"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:menu="@menu/menu" />

    <FrameLayout
        android:id="@+id/Container"
        android:layout_width="388dp"
        android:layout_height="664dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent">

    </FrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

設置 menu

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/qr"
        android:icon="@drawable/heart"
        android:title="page1" />
    <item
        android:id="@+id/bs"
        android:icon="@drawable/mark"
        android:title="page2" />
    <item
        android:id="@+id/rd"
        android:icon="@drawable/edit"
        android:title="page3" />
    <item
        android:id="@+id/ps"
        android:icon="@drawable/ok"
        android:title="page4" />
</menu>

設置圖標文字顯示 - labelVisibilityMode

auto 當item小於等於3是，顯示文字，item大於3個默認不顯示，選中顯示文字
labeled 始終顯示文字
selected 選中時顯示
unlabeled 選中時顯示

設置 selector 修改圖標

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="#87CEFA" />
<item android:color="#000000" />
</selector>

設置 OnNavigationItemSelectedListener

 BottomNavigationView.OnNavigationItemSelectedListener{ item ->


        when(item.itemId) {

            R.id.page1 -> {

               replace （Fragment1,"one"）

            }


            R.id.page2-> {

               replace （Fragment2,"two"）

            }

            R.id.page3-> {

                replace （Fragment3,"three"）

            }

            R.id.page4-> {

             replace （Fragment4,"four"）

            }

        }


        false

    }

1. 在Oncreate 設置一開始的 顯示 Fragment

2. BottomNavigationView 設置 我們寫好的 OnNavigationItemSelectedListener

   override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
         
         // 1)

        initFragment  ()

        val navigationView:BottomNavigationView =findViewById(R.id.navigationView)
        // 2)
        navigationView.setOnNavigationItemSelectedListener(Listener)


    }

initFragment 方法 add Fragment1() , 在 BottomNavigationView
未切換任何 Fragment 時 , 預設 顯示 Fragment1()

fun initFragment  (){

        val fragment_one = Fragment1()

        val transaction = supportFragmentManager.beginTransaction()

        transaction.add(R.id.group,fragment_one,"one")

        transaction.addToBackStack(null)

        transaction.commit()



}

replace 方法 , 將前面的 Fragment 移除 , 替換成新的 Fragment

fun replace (fragment:Fragment,tag:String){

 val transaction = supportFragmentManager.beginTransaction()

 transaction.replace(R.id.group,fragment,tag)

 transaction.addToBackStack(null)

 transaction.commit()

}